var ball = document.querySelector('.circle-red')
var w = document.documentElement.clientWidth,
h = document.documentElement.clientHeight;
var disX = 4,
    disY = 4;
var bw = ball.clientWidth,
    bh = ball.clientHeight;
var maxLeft = w - bw,
      maxTop = h - bh;
var ballset = setInterval(function () { 
  var rect = ball.getBoundingClientRect()
  var x = rect.left,
      y = rect.top;
  console.log(rect)
  var left = x + disX,
      top = y + disY;
  
  if(left < 0){
    left = 0
    disX = -disX
  }
  if(left > maxLeft){
    left = maxLeft
    disX = -disX
  }
  if(top < 0){
    top= 0
    disY = -disY
  }
  if(top > maxTop){
    top = maxTop
    disY = -disY
  }

  ball.style.left = left + 'px'
  ball.style.top = top + 'px'
 },20)



 function getRandom(){

 }
 setTimeout(() => {
  clearInterval(ballset)
 }, 20000);